<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>唐河县农村电子商务店铺录入系统</title>
        <meta charset = "UTF-8">
        <link type = "text/css" rel = "stylesheet" href = "../css/base.css"/>
        <link type = "text/css" rel = "stylesheet" href = "../css/common.css"/>
        <style>
            .system-title {
                width: 100%;
                height: 60px;
                background: #0d3349;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
                color: #fff;
            }

            .input-container {
                width: 50%;
                height: 300px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -25%;
                margin-top: -15%;
                /* border: 1px solid #ddd;*/
            }

            .red {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class = "system-title">
            唐河县农村电子商务店铺录入系统
        </div>
        <div class = "input-container">
            <div class = "shop-nick mt50 clearfix" style = "height: 30px;">
                <div style = "display: inline-block;float: left;width:20%;height:30px;line-height:30px;text-align:right;">
                    <b>店铺名称:</b>
                </div>
                <div style = "display: inline-block;float: right;width:80%;text-align: center;">
                    <input id = "nick-input" type = "text" style = "width:80%;height: 30px;padding-left: 10px;font-size:16px;" placeholder = "请在此输入您淘宝店铺的名称">
                </div>
            </div>
            <div class = "user-info mt20 clearfix" style = "height: 30px;">
                <div style = "display: inline-block;float: left;width:20%;height:30px;line-height:30px;text-align:right;">
                    <b>店铺地址:</b>
                </div>
                <div style = "display: inline-block;float: right;width:80%;text-align: center;height: 30px;line-height: 30px;">
                    <a href = "https://moyibaby.taobao.com/?spm=2013.1.1000126.3.NlphWl">https://moyibaby.taobao.com/?spm=2013.1.1000126.3.NlphWl</a>
                    <!--<b>您输入的店铺不存在!</b>-->
                </div>
            </div>
            <div class = "user-addr mt20 clearfix" style = "height: 30px;">
                <div style = "display: inline-block;float: left;width:20%;height:30px;line-height:30px;text-align:right;">
                    <b>身份证详细地址:</b>
                </div>
                <div style = "display: inline-block;float: right;width:80%;text-align: center;">
                    <input id = "addr-input" type = "text" style = "width:80%;height: 30px;padding-left: 10px;font-size:16px;" placeholder = "请在此输入您的身份证上的地址">
                </div>
            </div>
            <div class = "user-addr mt20 clearfix" style = "height: 30px;">
                <div style = "display: inline-block;float: left;width:20%;height:30px;line-height:30px;text-align:right;">
                    <b>联系方式:</b>
                </div>
                <div style = "display: inline-block;float: right;width:80%;text-align: center;">
                    <input id = "contact-input" type = "text" style = "width:80%;height: 30px;padding-left: 10px;font-size:16px;" placeholder = "请在此输入您的手机或者固定电话">
                </div>
            </div>
            <div class = "user-addr mt20 clearfix" style = "height: 30px;">
                <div style = "display: inline-block;float: left;width:20%;height:30px;line-height:30px;text-align:right;">
                    <b>备注:</b>
                </div>
                <div style = "display: inline-block;float: right;width:80%;text-align: center;">
                    <input id = "note-input" type = "text" style = "width:80%;height: 30px;padding-left: 10px;font-size:16px;" placeholder = "请在此输入您的手机或者固定电话">
                </div>
            </div>
            <div class = "tc mt20">
                <button style = "width:120px;height: 30px;" id = "sure">确定</button>
            </div>
        </div>
        <script src = "../libs/jquery-1.7.1.min.js"></script>
        <script>
            function trim(str) {
                if (!str instanceof String)
                    return str;
                var res = str.replace(/^\s+|\s+$/gi, "");
                return res;
            }

            // 检测输入的店铺名称是否正确
            $("#nick-input").blur(function () {
                var nick = trim($('#nick-input').val());
                if (!nick) {
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: "",
                    data: {
                        nick: nick
                    },
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {

                        }
                    }
                });
            });

            $(document).ready(function () {
                var nick, addr, contact;

                // 提交用户数据
                $('#sure').click(function () {
                    nick = trim($('#nick-input').val());
                    addr = trim($('#addr-input').val());
                    contact = trim($('#contact-input').val());

                    if (!nick) {
                        return alert("店铺名称不能为空哦!");
                    }
                    if (!addr) {
                        return alert("您的身份证地址为空!");
                    }
                    if (!contact) {
                        return alert("您的联系方式为空!");
                    }
                    console.log(nick, addr, contact);
                    $.ajax({
                        type: 'GET',
                        url: "",
                        data: {
                            nick: nick,
                            addr: addr,
                            contact: contact
                        },
                        dataType: "json",
                        success: function (resp) {
                            if (resp.success) {

                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>